<template>
  <div>
    <van-nav-bar title="账户管理" left-arrow @click-left="$router.go(-1)"/>
    <van-cell title="头像" is-link style="marginBottom:15px" @click="PreviewImage">
      <template #right-icon>
       <van-image round width="2.5rem" height="2.5rem" :src="userInfo.pic"/>
       <van-icon name="arrow" />
      </template>
    </van-cell>
    <van-cell-group>
      <van-cell title="手机号" is-link :value="userInfo.phone"/>
      <van-cell title="QQ" is-link :value="userInfo.qq"/>
      <van-cell title="微信号" is-link :value="userInfo.wchat"/>
      <van-cell title="密码管理" is-link to="changePassword"/>
      <van-cell title="手势密码" is-link />
      <van-cell title="指纹" is-link />
    </van-cell-group>
  </div>
</template>
<script>
import { ImagePreview } from 'vant'
import { mapState } from 'vuex'
export default {
  name: 'accountManage',
  data () {
    return {}
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo
    })
  },
  methods: {
    PreviewImage () {
      ImagePreview(['https://img01.yzcdn.cn/vant/cat.jpeg'])
    }
  }
}
</script>
<style lang="less" scoped>
.van-cell {
  display: flex;
  align-items: center;
}
.van-cell__title {
  display: flex;
  align-items: center;
}
.van-icon{
    margin-left: 4px;
    color: #969799;
    height: 24px;
    font-size: 16px;
    line-height: 24px;
}
</style>
